<template>
  <div class="admin-dashboard">
    <!-- 头部导航 -->
    <div class="admin-header">
      <div class="header-content">
        <h1 class="admin-title">
          <van-icon name="setting-o" />
          管理员后台
        </h1>
        <div class="header-actions">
          <van-button type="primary" size="small" @click="saveAllChanges">
            <van-icon name="replay" />
            刷新数据
          </van-button>
          <van-button size="small" @click="previewChanges">
            <van-icon name="eye-o" />
            预览效果
          </van-button>
        </div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="admin-content">
      <!-- 服务卡片管理 -->
      <div class="admin-section">
        <div class="section-header">
          <h2>
            <van-icon name="apps-o" />
            服务卡片管理
          </h2>
            <van-button type="primary" size="small" @click="openAddServiceDialog">
            <van-icon name="plus" />
            添加服务
          </van-button>
        </div>
        <div class="image-grid">
          <div
            v-for="(service, index) in serviceCards"
            :key="service.id || `service-${index}`"
            class="image-card"
          >
            <div class="image-preview">
              <img :src="getFullImageUrl(service.image)" :alt="service.title" />
              <div class="image-overlay">
                <van-button
                  size="mini"
                  type="primary"
                  @click="editService(index)"
                >
                  编辑
                </van-button>
                <van-button
                  size="mini"
                  type="danger"
                  @click="deleteService(index)"
                >
                  删除
                </van-button>
              </div>
            </div>
            <div class="image-info">
              <h4>{{ service.title }}</h4>
              <div class="price-info">
                <span class="current-price">{{ service.currentPrice }}</span>
                <span class="original-price">{{ service.originalPrice }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 分类管理 -->
      <div class="admin-section">
        <div class="section-header">
          <h2>
            <van-icon name="apps-o" />
            分类管理
          </h2>
          <van-button type="primary" size="small" @click="openAddCategoryDialog">
            <van-icon name="plus" />
            添加分类
          </van-button>
        </div>
        <div class="image-grid">
          <div
            v-for="(category, index) in categories"
            :key="category.id || `category-${index}`"
            class="image-card"
          >
            <div class="image-preview">
              <img :src="getFullImageUrl(category.image)" :alt="category.title" />
              <div class="image-overlay">
                <van-button
                  size="mini"
                  type="primary"
                  @click="editCategory(index)"
                >
                  编辑
                </van-button>
                <van-button
                  size="mini"
                  type="danger"
                  @click="handleDeleteCategory(index)"
                >
                  删除
                </van-button>
              </div>
            </div>
            <div class="image-info">
              <h4>{{ category.title }}</h4>
              <p>{{ category.description }}</p>
            </div>
          </div>
        </div>
      </div>

    </div>

    <!-- 编辑弹窗 -->
    <van-popup
      :show="showEditDialog"
      @update:show="showEditDialog = $event"
      position="bottom"
      :style="{ height: '80%' }"
      round
      :overlay="true"
    >
      <div class="edit-dialog">
        <div class="dialog-header">
          <h3>{{ editTitle }}</h3>
          <van-button size="small" type="primary" @click="saveEdit">
            保存
          </van-button>
        </div>

        <div class="dialog-content">
          <!-- 图片上传区域 -->
          <div class="upload-section">
            <h4>图片上传</h4>
            <ImageUploader v-model="currentEditData.image" />
          </div>

          <!-- 基本信息编辑 -->
          <div class="form-section">
            <van-field
              v-model="currentEditData.title"
              label="标题"
              placeholder="请输入标题"
              required
            />

            <van-field
              v-if="editType === 'slider'"
              v-model="currentEditData.description"
              label="描述"
              placeholder="请输入描述"
              type="textarea"
              rows="2"
            />

            <van-field
              v-if="editType === 'service'"
              v-model="currentEditData.price"
              label="价格"
              placeholder="请输入价格（数字）"
              type="number"
              required
              @input="updatePriceDisplay"
            />

            <van-field
              v-if="editType === 'service'"
              v-model="currentEditData.description"
              label="描述"
              placeholder="请输入服务描述"
              type="textarea"
              rows="2"
            />

            <van-field
              v-if="editType === 'category'"
              v-model="currentEditData.categorytype"
              label="分类类型"
              placeholder="请输入分类类型（数字）"
              type="number"
            />

          </div>
        </div>
      </div>
    </van-popup>

    <!-- 类型选择器 -->
    <van-popup
      :show="showTypePicker"
      @update:show="showTypePicker = $event"
      position="bottom"
    >
      <van-picker
        :columns="typeColumns"
        @confirm="onTypeConfirm"
        @cancel="showTypePicker = false"
      />
    </van-popup>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import {
  showToast,
  showConfirmDialog,
  showLoadingToast,
  closeToast,
} from "vant";
import {
  uploadImageApi,
  getServiceCards,
  getCategories,
  addServiceCard,
  updateServiceCard,
  deleteServiceCard,
  addCategory,
  updateCategory,
  deleteCategory,
  adminUploadImageApi,
  adminUploadCategoryImageApi,
} from "@/api/index.js";
import { getFullImageUrl, processImageResponse } from "@/utils/imageUtils.js";
import ImageUploader from "@/components/ImageUploader.vue";

// 显式注册组件（虽然在 script setup 中通常不需要）
const components = {
  ImageUploader
};

// 数据状态
const serviceCards = ref([]);
const categories = ref([]);

// 编辑状态
const showEditDialog = ref(false);
const showTypePicker = ref(false);
const editType = ref("");
const editIndex = ref(-1);
const editTitle = ref("");
const currentEditData = reactive({});

// 类型选择器数据
const typeColumns = [
  { text: "图片", value: "image" },
  { text: "视频", value: "video" },
];

// 初始化数据
onMounted(() => {
  loadData();
});

// 加载数据
async function loadData() {
  try {
    showLoadingToast({
      message: "加载数据中...",
      forbidClick: true,
    });

    // 并行加载所有数据
    const [servicesRes, categoriesRes] =
      await Promise.all([
        getServiceCards().catch(() => ({ data: [] })),
        getCategories().catch(() => ({ data: [] })),
      ]);

    // 处理服务卡片数据，将后端字段映射到前端字段
    const rawServices = servicesRes.data || [];
    serviceCards.value = rawServices.map((service) => {
      // 处理价格字段，确保有默认值
      const price = service.price || 0;
      const currentPrice = price > 0 ? `¥${price}` : "¥0";
      const originalPrice = price > 0 ? `¥${Math.floor(price * 1.2)}` : "¥0";

      return {
        id: service.serviceid,
        image: service.servicepicture, // 后端字段映射到前端显示字段
        img: service.servicepicture, // 保持数据结构一致性
        title: service.servicename || "未命名服务",
        currentPrice,
        originalPrice,
        price: service.price, // 保存原始价格数值用于编辑
        description: service.description || "",
        categoryid: service.categoryid,
        createtime: service.createtime,
        updatetime: service.updatetime,
      };
    });

    // 处理分类数据，将后端字段映射到前端字段
    const rawCategories = categoriesRes.data || [];
    categories.value = rawCategories.map((category) => ({
      id: category.categoryid,
      image: category.categoryimage,
      title: category.categoryname || "未命名分类",
      description: `分类类型: ${category.categoryType || 1}`,
      categorytype: category.categoryType || 1,
      createtime: category.createtime,
      updatetime: category.updatetime,
    }));


    closeToast();
  } catch (error) {
    closeToast();
    showToast("加载数据失败，使用模拟数据");
    console.error("加载数据失败:", error);
    loadMockData();
  }
}

// 加载模拟数据
function loadMockData() {
  // 暂时为空
}

// 服务卡片管理
function openAddServiceDialog() {
  editType.value = "service";
  editTitle.value = "添加服务卡片";
  editIndex.value = -1;
  
  // 清空并设置新的数据
  Object.keys(currentEditData).forEach(key => delete currentEditData[key]);
  Object.assign(currentEditData, {
    image: "",
    title: "",
    price: 0,
    currentPrice: "¥0",
    originalPrice: "¥0",
    description: "",
    categoryid: 1,
  });
  
  showEditDialog.value = true;
}

function editService(index) {
  editType.value = "service";
  editTitle.value = "编辑服务卡片";
  editIndex.value = index;
  const serviceData = { ...serviceCards.value[index] };
  // 统一字段名：将 img 映射为 image
  if (serviceData.img && !serviceData.image) {
    serviceData.image = serviceData.img;
  }
  // 确保价格字段是数值类型
  if (serviceData.price === undefined && serviceData.currentPrice) {
    // 从显示价格中提取数值
    const priceMatch = serviceData.currentPrice.match(/\d+/);
    serviceData.price = priceMatch ? parseFloat(priceMatch[0]) : 0;
  }
  Object.assign(currentEditData, serviceData);
  showEditDialog.value = true;
}

function deleteService(index) {
  showConfirmDialog({
    title: "确认删除",
    message: "确定要删除这个服务卡片吗？",
  })
    .then(async () => {
      const service = serviceCards.value[index];
      const serviceId = service.id;
      
      try {
        showLoadingToast({
          message: "删除中...",
          forbidClick: true,
        });
        
        // 调用后端删除API
        await deleteServiceCard(serviceId);
        
        // 删除成功后从本地数组中移除
        serviceCards.value.splice(index, 1);
        
        closeToast();
        showToast("删除成功");
      } catch (error) {
        closeToast();
        console.error("删除服务失败:", error);
        showToast("删除失败，请重试");
      }
    })
    .catch(() => {
      // 用户取消
    });
}

// 分类管理
function openAddCategoryDialog() {
  editType.value = "category";
  editTitle.value = "添加分类";
  editIndex.value = -1;
  Object.assign(currentEditData, {
    image: "",
    title: "",
    categorytype: 1,
  });
  showEditDialog.value = true;
}

function editCategory(index) {
  editType.value = "category";
  editTitle.value = "编辑分类";
  editIndex.value = index;
  const categoryData = { ...categories.value[index] };
  Object.assign(currentEditData, categoryData);
  showEditDialog.value = true;
}

function handleDeleteCategory(index) {
  showConfirmDialog({
    title: "确认删除",
    message: "确定要删除这个分类吗？",
  })
    .then(async () => {
      const category = categories.value[index];
      const categoryId = category.id;
      
      try {
        showLoadingToast({
          message: "删除中...",
          forbidClick: true,
        });
        
        // 调用后端删除API
        await deleteCategory(categoryId);
        
        // 删除成功后从本地数组中移除
        categories.value.splice(index, 1);
        
        closeToast();
        showToast("删除成功");
      } catch (error) {
        closeToast();
        console.error("删除分类失败:", error);
        showToast("删除失败，请重试");
      }
    })
    .catch(() => {
      // 用户取消
    });
}


// 更新价格显示
function updatePriceDisplay() {
  const price = parseFloat(currentEditData.price) || 0;
  currentEditData.currentPrice = price > 0 ? `¥${price}` : "¥0";
  currentEditData.originalPrice =
    price > 0 ? `¥${Math.floor(price * 1.2)}` : "¥0";
}

// 保存编辑
async function saveEdit() {
  if (!currentEditData.title) {
    showToast("请输入标题");
    return;
  }

  if (!currentEditData.image) {
    showToast("请上传图片");
    return;
  }

  // 验证服务卡片的价格字段
  if (editType.value === "service") {
    const price = parseFloat(currentEditData.price);
    if (isNaN(price) || price < 0) {
      showToast("请输入有效的价格");
      return;
    }
    // 确保价格显示字段是最新的
    updatePriceDisplay();
  }

  try {
    showLoadingToast({
      message: "保存中...",
      forbidClick: true,
    });

    let result;

    if (editIndex.value === -1) {
      // 添加新项
      switch (editType.value) {
        case "service":
          try {
            // 如果有图片且是新上传的（blob URL 或 Base64），使用一体化接口上传图片并创建服务
            if (currentEditData.image && (currentEditData.image.startsWith('blob:') || currentEditData.image.startsWith('data:'))) {
              console.log("检测到新上传的图片，使用一体化接口上传图片并创建服务...");

              // 将图片URL（blob 或 Base64）转换为 Blob/File 对象
              let imageBlob;
              if (currentEditData.image.startsWith('data:')) {
                // Base64 转 Blob
                const base64Data = currentEditData.image.split(',')[1];
                const mimeType = currentEditData.image.match(/data:([^;]+);/)[1];
                const byteCharacters = atob(base64Data);
                const byteNumbers = new Array(byteCharacters.length);
                for (let i = 0; i < byteCharacters.length; i++) {
                  byteNumbers[i] = byteCharacters.charCodeAt(i);
                }
                const byteArray = new Uint8Array(byteNumbers);
                imageBlob = new Blob([byteArray], { type: mimeType });
              } else {
                // blob URL 转 Blob
                imageBlob = await fetch(currentEditData.image).then(r => r.blob());
              }

              // 创建 FormData
              const formData = new FormData();
              const fileName = `${currentEditData.title || 'service'}-${Date.now()}.jpg`;
              formData.append('image', imageBlob, fileName);
              
              // 添加服务信息到FormData，让后端一次性完成图片上传和服务创建
              formData.append('servicename', currentEditData.title || '');
              formData.append('price', String(currentEditData.price || '0'));
              formData.append('description', currentEditData.description || '');
              formData.append('categoryid', String(currentEditData.categoryid || '1'));
              
              // 调用一体化接口，上传图片的同时创建服务
              const uploadResult = await adminUploadImageApi(formData);
              console.log("图片上传及服务创建结果:", uploadResult);

              if (uploadResult.data && uploadResult.data.service) {
                // 后端已经创建了服务，直接将返回的服务数据转换为前端显示格式
                const serviceData = uploadResult.data.service;
                const newService = {
                  id: serviceData.serviceid,
                  image: serviceData.servicepicture,
                  img: serviceData.servicepicture,
                  title: serviceData.servicename,
                  currentPrice: `¥${serviceData.price}`,
                  originalPrice: `¥${Math.floor(serviceData.price * 1.2)}`,
                  price: serviceData.price,
                  description: serviceData.description,
                  categoryid: serviceData.categoryid,
                  createtime: serviceData.createtime,
                  updatetime: serviceData.updatetime,
                };
                serviceCards.value.push(newService);
                console.log("服务添加成功:", newService);
              } else {
                throw new Error("服务创建失败，后端未返回服务数据");
              }
            } else {
              // 使用现有图片URL，调用添加服务接口
              const serviceData = {
                servicename: currentEditData.title,
                price: parseFloat(currentEditData.price) || 0,
                description: currentEditData.description || "",
                servicepicture: currentEditData.image,
                categoryid: currentEditData.categoryid || 1,
              };
              
              console.log("使用现有图片URL，准备添加服务，数据:", serviceData);

              result = await addServiceCard(serviceData);
              if (result.data) {
                // 将后端返回的数据转换为前端显示格式
                const newService = {
                  id: result.data.serviceid,
                  image: result.data.servicepicture,
                  img: result.data.servicepicture,
                  title: result.data.servicename,
                  currentPrice: `¥${result.data.price}`,
                  originalPrice: `¥${Math.floor(result.data.price * 1.2)}`,
                  price: result.data.price,
                  description: result.data.description,
                  categoryid: result.data.categoryid,
                  createtime: result.data.createtime,
                  updatetime: result.data.updatetime,
                };
                serviceCards.value.push(newService);
                console.log("服务添加成功:", newService);
              }
            }
          } catch (error) {
            console.error("添加服务异常:", error);
            showToast(`添加服务失败: ${error.message || '请重试'}`);
            closeToast();
            showEditDialog.value = false;
            return;
          }
          break;
        case "category":
          try {
            // 如果有图片且是新上传的（blob URL 或 Base64），先上传图片
            if (currentEditData.image && (currentEditData.image.startsWith('blob:') || currentEditData.image.startsWith('data:'))) {
              console.log("检测到新上传的分类图片，开始上传...");
              
              // 将图片URL（blob 或 Base64）转换为 Blob/File 对象
              let imageBlob;
              if (currentEditData.image.startsWith('data:')) {
                // Base64 转 Blob
                const base64Data = currentEditData.image.split(',')[1];
                const mimeType = currentEditData.image.match(/data:([^;]+);/)[1];
                const byteCharacters = atob(base64Data);
                const byteNumbers = new Array(byteCharacters.length);
                for (let i = 0; i < byteCharacters.length; i++) {
                  byteNumbers[i] = byteCharacters.charCodeAt(i);
                }
                const byteArray = new Uint8Array(byteNumbers);
                imageBlob = new Blob([byteArray], { type: mimeType });
              } else {
                // blob URL 转 Blob
                imageBlob = await fetch(currentEditData.image).then(r => r.blob());
              }
              
              // 创建 FormData
              const formData = new FormData();
              const fileName = `${currentEditData.title || 'category'}-${Date.now()}.jpg`;
              formData.append('image', imageBlob, fileName);
              
              // 添加分类信息到FormData
              formData.append('categoryname', currentEditData.title || '');
              formData.append('categorytype', String(currentEditData.categorytype || '1'));
              
              // 调用分类专用图片上传接口，该接口会自动创建分类
              result = await adminUploadCategoryImageApi(formData);
              console.log("分类图片上传及分类创建结果:", result);
              
              if (result.data && result.data.category) {
                // 后端已经创建了分类，直接将返回的分类数据转换为前端显示格式
                const categoryData = result.data.category;
                const newCategory = {
                  id: categoryData.categoryid,
                  image: categoryData.categoryimage,
                  title: categoryData.categoryname,
                  description: `分类类型: ${categoryData.categoryType || 1}`,
                  categorytype: categoryData.categoryType || 1,
                  createtime: categoryData.createtime,
                  updatetime: categoryData.updatetime,
                };
                categories.value.push(newCategory);
                console.log("分类添加成功:", newCategory);
              } else {
                throw new Error("分类创建失败，后端未返回分类数据");
              }
            } else {
              // 使用现有图片URL，直接调用添加分类接口
              const categoryData = {
                categoryname: currentEditData.title,
                categoryimage: currentEditData.image,
                categorytype: currentEditData.categorytype || 1,
              };
              
              console.log("使用现有图片URL，准备添加分类，数据:", categoryData);
              
              result = await addCategory(categoryData);
              if (result.data) {
                // 将后端返回的数据转换为前端显示格式
                const newCategory = {
                  id: result.data.categoryid,
                  image: result.data.categoryimage,
                  title: result.data.categoryname,
                  description: `分类类型: ${result.data.categoryType || 1}`,
                  categorytype: result.data.categoryType || 1,
                  createtime: result.data.createtime,
                  updatetime: result.data.updatetime,
                };
                categories.value.push(newCategory);
                console.log("分类添加成功:", newCategory);
              }
            }
          } catch (error) {
            console.error("添加分类异常:", error);
            showToast(`添加分类失败: ${error.message || '请重试'}`);
            closeToast();
            showEditDialog.value = false;
            return;
          }
          break;
      }
    } else {
      // 编辑现有项
      const itemId = getCurrentItemId();
      switch (editType.value) {
        case "service":
          try {
            // 准备发送给后端的数据
            const updateData = {
              servicename: currentEditData.title,
              price: parseFloat(currentEditData.price) || 0,
              description: currentEditData.description || "",
              servicepicture: currentEditData.image,
              categoryid: currentEditData.categoryid || 1,
            };
            
            await updateServiceCard(itemId, updateData);
          } catch (error) {
            console.warn("更新服务卡片失败，使用本地更新:", error);
          }
          const serviceData = { ...currentEditData };
          // 统一字段名：将 image 映射回 img（保持数据结构一致）
          if (serviceData.image) {
            serviceData.img = serviceData.image;
          }
          Object.assign(serviceCards.value[editIndex.value], serviceData);
          break;
        case "category":
          try {
            // 准备发送给后端的数据
            const updateData = {
              categoryname: currentEditData.title,
              categoryimage: currentEditData.image,
              categorytype: currentEditData.categorytype || 1,
            };
            
            await updateCategory(itemId, updateData);
          } catch (error) {
            console.warn("更新分类失败，使用本地更新:", error);
          }
          Object.assign(categories.value[editIndex.value], currentEditData);
          break;
      }
    }

    closeToast();
    showEditDialog.value = false;
    showToast("保存成功");
  } catch (error) {
    closeToast();
    showToast("保存失败");
    console.error("保存失败:", error);
  }
}

// 获取当前编辑项的ID
function getCurrentItemId() {
  switch (editType.value) {
    case "service":
      return serviceCards.value[editIndex.value]?.id;
    case "category":
      return categories.value[editIndex.value]?.id;
    default:
      return null;
  }
}

// 类型选择确认
function onTypeConfirm({ selectedValues }) {
  currentEditData.type = selectedValues[0];
  showTypePicker.value = false;
}

// 保存所有更改
async function saveAllChanges() {
  try {
    showLoadingToast({
      message: "重新加载数据中...",
      forbidClick: true,
    });

    // 由于服务卡片和分类都是实时保存到后端的
    // 这里只需要重新加载数据以确保显示最新状态
    await loadData();

    closeToast();
    showToast("数据已刷新");
  } catch (error) {
    closeToast();
    showToast("刷新失败");
    console.error("刷新失败:", error);
  }
}

// 预览效果
function previewChanges() {
  // 跳转到首页预览
  window.open("/", "_blank");
}
</script>

<style lang="scss" scoped>
.admin-dashboard {
  min-height: 100vh;
  background: #f5f5f5;
}

.admin-header {
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.admin-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #333;
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-actions {
  display: flex;
  gap: 12px;
}

.admin-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.admin-section {
  background: white;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid #eee;

  h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
    display: flex;
    align-items: center;
    gap: 8px;
  }
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.image-card {
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;

  &:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
  }
}

.image-preview {
  position: relative;
  height: 120px;
  overflow: hidden;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  &:hover .image-overlay {
    opacity: 1;
  }

  .video-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 12px;
  }
}

.image-info {
  padding: 12px;

  h4 {
    margin: 0 0 4px 0;
    font-size: 14px;
    font-weight: 500;
    color: #333;
  }

  p {
    margin: 0;
    font-size: 12px;
    color: #666;
    line-height: 1.4;
  }

  .price-info {
    display: flex;
    align-items: center;
    gap: 8px;

    .current-price {
      color: #ff4444;
      font-weight: 600;
      font-size: 14px;
    }

    .original-price {
      color: #999;
      text-decoration: line-through;
      font-size: 12px;
    }
  }
}

.edit-dialog {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #eee;

  h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
  }
}

.dialog-content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

.upload-section {
  margin-bottom: 24px;

  h4 {
    margin: 0 0 12px 0;
    font-size: 14px;
    font-weight: 500;
    color: #333;
  }
}

.form-section {
  .van-field {
    margin-bottom: 12px;
  }
}

// 响应式设计
@media (max-width: 768px) {
  .header-content {
    padding: 12px 16px;
  }

  .admin-title {
    font-size: 18px;
  }

  .header-actions {
    gap: 8px;
  }

  .admin-content {
    padding: 16px;
  }

  .admin-section {
    padding: 16px;
  }

  .image-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
  }

  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;

    h2 {
      font-size: 16px;
    }
  }
}
</style>
